    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动态输入案例</title>
        <script src="../jquery-3.4.1.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .wrap{
                margin: 150px auto;
                width: 700px;
                /*height: 100%;*/
                position: relative;
                /*float: left;*/
            }
            #txt{
                height: 36px;
                width: 400px;
                border: 2px solid #e0d9dc;
            }
            h1{
               padding-bottom: 50px;
            }
            #txt{
                font-size: 24px;
                font-weight: 700;
                color: #3bfff6;
            }
            #txt1{
                font-size: 24px;
                font-weight: 700;
                height: 36px;
                width: 150px;
            }
            #addTxt{

            }
            #blink{
                /*animation: blink 1s infinite;*/
                /*webkit-animation: blink .7s infinite;*/
                animation:blink 1s infinite;
                /*color: #ff91bd;*/
            }
            @keyframes blink {
                0%, 100% {
                    background-color: #000;
                    color: #ffffff;
                }
                50% {
                    background-color: #bbb; /* not #aaa because it's seem there is Google Chrome bug */
                    color: #000;
                }
            }
        </style>
    </head>
    <body>
    <div class="wrap">
        <h1>You should sing:
                <span id="addTxt"></span>
                <span id="blink">|</span>!
        </h1>
<!--        <input type="text" id="txt" placeholder="输入之前有字节跳动">-->
        <input type="text" id="txt" value="输入之前有字节跳动">
        <input type="button" id="txt1" value="Please Add">

<!--        <div class="add">-->
<!--            Please Add-->
<!--        </div>-->
    </div>
<!--    <input type="text" value="请输入要查找的关键字"-->
<!--           onfocus="if(value=='请输入要查找的关键字')value=''"-->
<!--           onblur="if(!value)value='请输入要查找的关键字'" name="keyword" >-->

    <script>
        // $("#txt").on("focus",function () {
        //       $(this).val("");
        // })
        $(function () {
            var str="我觉得有点累我整夜不能睡";
            var arr=str.split("");
            var timer=null;
            var str1="";
            var num=0;
             timer=setInterval(function () {
                 if(arr[num]===undefined){
                    clearInterval(timer);
                    $("#blink").hide();
                 }else {
                     str1=str1+arr[num];//一个个的添加进去arr[i]
                     $("#addTxt").text(str1);
                 }
               num++;

             },300)
            $("#txt1").on("click",function () {
                // alert("00");

                var str2=$("#txt").val();//关键是获取input中值，然后跟上一个操作一样
                var str3="";
                $("#txt").val("");
                var arr=str2.split("");
                num=0;
                timer=setInterval(function () {
                    if(arr[num]===undefined){
                        clearInterval(timer);
                        $("#blink").hide();
                    }else { str3=str3+arr[num];
                        $("#addTxt").text(str3);
                    }
                    num++;
console.log(num)
                },300)
            })
        })
    </script>
    </body>
    </html>